<!-- Subhead
================================================== -->
<header id="nav-bar" class="container">
   <div class="row">
      <div class="span12">
         <div id="header-container">
            <a id="backbutton" class="win-backbutton" href="./hub.html"></a>
            <h5>{{appname}}</h5>
            <div class="dropdown">
               <a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#" >
                  {{_i}}BootMetro Components{{/i}}
                  <b class="caret"></b>
               </a>
               {{>headermenu}}
            </div>
         </div>
         <div id="top-info" class="pull-right">
            <a id="settings" class="pull-right" href="#">
               <b class="icon-settings"></b>
            </a>
         </div>
      </div>
   </div>
</header>
<div class="container">
   <p class="lead">{{_i}}Here we have various Metro specific components.{{/i}}</p>
</div>

<div class="container">

   <!-- Docs nav
   ================================================== -->
   <div class="row">
      <div class="span3 bs-docs-sidebar">
         <ul class="nav nav-list bs-docs-sidenav">
            <li><a href="#progress"><i class="icon-chevron-right"></i> {{_i}}Metro Progress Bars{{/i}}</a></li>
            <li><a href="#modals"><i class="icon-chevron-right"></i> {{_i}}Modal{{/i}}</a></li>
            <li><a href="#datepicker"><i class="icon-chevron-right"></i> {{_i}}DatePicker{{/i}}</a></li>
            <li><a href="#flipview"><i class="icon-chevron-right"></i> {{_i}}FlipView{{/i}}</a></li>
         </ul>
      </div>
      <div class="span9">

         <!-- Progress bars
         ================================================== -->
         <section id="progress">
            <div class="page-header">
               <h1>{{_i}}Metro Progress Bars{{/i}} <small>{{_i}}For loading, redirecting, or action status{{/i}}</small></h1>
            </div>

            <h2>{{_i}}Examples and markup{{/i}}</h2>

            <h3>{{_i}}Determinate{{/i}}</h3>
            <p>{{_i}}Use the determinate progress bar style when a task is determinate, that is when it has a well-defined duration or a predictable end.{{/i}}</p>
            <div class="bs-docs-example">
               <div class="progress">
                  <div class="bar" style="width: 60%;"></div>
               </div>
            </div>
         <pre class="prettyprint linenums">
         &lt;div class="progress"&gt;
           &lt;div class="bar" style="width: 60%;"&gt;&lt;/div&gt;
         &lt;/div&gt;
         </pre>

            <h3>{{_i}}Indeterminate{{/i}}</h3>
            <p>{{_i}}Use this style for tasks that are not determinate that are non-modal (don't block user interaction).{{/i}}</p>
            <div class="bs-docs-example">
               <div class="progress progress-indeterminate">
                  <div class="bar"></div>
               </div>
            </div>
         <pre class="prettyprint linenums">
         &lt;div class="progress progress-indeterminate"&gt;
           &lt;div class="bar"&gt;&lt;/div&gt;
         &lt;/div&gt;
         </pre>

            <h3>{{_i}}Indeterminate Ring{{/i}}</h3>
            <p>{{_i}}Use this style for tasks that are not determinate that are non-modal (don't block user interaction).{{/i}}</p>
            <div class="bs-docs-example">
               <div class="progress progress-indeterminate">
                  <div class="win-ring small"></div>
               </div>
            </div>
         <pre class="prettyprint linenums">
         &lt;div class="progress progress-indeterminate"&gt;
           &lt;div class="win-ring small"&gt;&lt;/div&gt;
         &lt;/div&gt;
         </pre>

         </section>



         <!-- Modal
         ================================================== -->
         <section id="modals">
            <div class="page-header">
               <h1>{{_i}}Modals{{/i}} <small>bootstrap-modal.js</small></h1>
            </div>


            <h2>{{_i}}Examples{{/i}}</h2>
            <p>{{_i}}Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.{{/i}}</p>

            <h3>{{_i}}Static example{{/i}}</h3>
            <p>{{_i}}A rendered modal with header, body, and set of actions in the footer.{{/i}}</p>
            <div class="bs-docs-example" style="background-color: #f5f5f5;">
               <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
                  <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                     <h3>{{_i}}Modal header{{/i}}</h3>
                  </div>
                  <div class="modal-body">
                     <p>{{_i}}One fine body&hellip;{{/i}}</p>
                  </div>
                  <div class="modal-footer">
                     <a href="#" class="btn">{{_i}}Close{{/i}}</a>
                     <a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
                  </div>
               </div>
            </div>{{! /example }}
         <pre class="prettyprint linenums">
         &lt;div class="modal hide fade"&gt;
           &lt;div class="modal-header"&gt;
             &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
             &lt;h3&gt;{{_i}}Modal header{{/i}}&lt;/h3&gt;
           &lt;/div&gt;
           &lt;div class="modal-body"&gt;
             &lt;p&gt;{{_i}}One fine body&hellip;{{/i}}&lt;/p&gt;
           &lt;/div&gt;
           &lt;div class="modal-footer"&gt;
             &lt;a href="#" class="btn"&gt;{{_i}}Close{{/i}}&lt;/a&gt;
             &lt;a href="#" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt;
           &lt;/div&gt;
         &lt;/div&gt;
         </pre>

            <h3>{{_i}}Live demo{{/i}}</h3>
            <p>{{_i}}Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}</p>
            <p>{{_i}}To show a Metro style message dialog, add a class <code>message</code>.{{/i}}</p>
            <p>{{_i}}To show a Metro style warning or error dialog, add a class <code>warning</code>.{{/i}}</p>
            <!-- sample modal content -->
            <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                  <h3 id="myModalLabel">{{_i}}Modal Heading{{/i}}</h3>
               </div>
               <div class="modal-body">
                  <h4>{{_i}}Text in a modal{{/i}}</h4>
                  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>

                  <h4>{{_i}}Popover in a modal{{/i}}</h4>
                  <p>{{_i}}This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.{{/i}}</p>

                  <h4>{{_i}}Tooltips in a modal{{/i}}</h4>
                  <p>{{_i}}<a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.{{/i}}</p>

                  <hr>

                  <h4>{{_i}}Overflowing text to show optional scrollbar{{/i}}</h4>
                  <p>{{_i}}We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.{{/i}}</p>
                  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
               </div>
               <div class="modal-footer">
                  <button class="btn" data-dismiss="modal">{{_i}}Close{{/i}}</button>
                  <button class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
               </div>
            </div>
            <div id="myModal2" class="modal message hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                  <h3>{{_i}}Modal Heading{{/i}}</h3>
               </div>
               <div class="modal-body">
                  <h4>{{_i}}Text in a modal{{/i}}</h4>
                  <p>Do you want to turn on location services so Microsoft can use your location ?</p>
               </div>
               <div class="modal-footer">
                  <button class="btn" data-dismiss="modal">{{_i}}Close{{/i}}</button>
                  <button class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
               </div>
            </div>
            <div id="myModal3" class="modal warning bg-color-blu hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               <div class="modal-body">
                  <p>The new product cannot be saved due to an error. A log message has been emailed to you.</p>
               </div>
               <div class="modal-footer">
                  <button class="btn btn-large" data-dismiss="modal">{{_i}}Close{{/i}}</button>
               </div>
            </div>
            <div class="bs-docs-example" style="padding-bottom: 24px;">
               <a data-toggle="modal" href="#myModal" class="btn btn-primary">{{_i}}Show Flyout (classic modal){{/i}}</a>
               <a data-toggle="modal" href="#myModal2" class="btn btn-success">{{_i}}Show Metro Message{{/i}}</a>
               <a data-toggle="modal" href="#myModal3" class="btn btn-warning">{{_i}}Show Error/Warning{{/i}}</a>
            </div>{{! /example }}

         <pre class="prettyprint linenums">
         &lt!-- Button to trigger modal --&gt;
         &lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;{{_i}}Launch demo modal{{/i}}&lt;/a&gt;

         &lt!-- Modal --&gt;
         &lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
           &lt;div class="modal-header"&gt;
             &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&lt;/button&gt;
             &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
           &lt;/div&gt;
           &lt;div class="modal-body"&gt;
             &lt;p&gt;{{_i}}One fine body&hellip;{{/i}}&lt;/p&gt;
           &lt;/div&gt;
           &lt;div class="modal-footer"&gt;
             &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;{{_i}}Close{{/i}}&lt;/button&gt;
             &lt;button class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/button&gt;
           &lt;/div&gt;
         &lt;/div&gt;
         </pre>


            <hr class="bs-docs-separator">


            <h2>{{_i}}Usage{{/i}}</h2>

            <h3>{{_i}}Via data attributes{{/i}}</h3>
            <p>{{_i}}Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.{{/i}}</p>
            <pre class="prettyprint linenums">&lt;button type="button" data-toggle="modal" data-target="#myModal"&gt;Launch modal&lt;/button&gt;</pre>

            <h3>{{_i}}Via JavaScript{{/i}}</h3>
            <p>{{_i}}Call a modal with id <code>myModal</code> with a single line of JavaScript:{{/i}}</p>
            <pre class="prettyprint linenums">$('#myModal').modal(options)</pre>

            <h3>{{_i}}Options{{/i}}</h3>
            <p>{{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.{{/i}}</p>
            <table class="table table-bordered table-striped">
               <thead>
                  <tr>
                     <th style="width: 100px;">{{_i}}Name{{/i}}</th>
                     <th style="width: 50px;">{{_i}}type{{/i}}</th>
                     <th style="width: 50px;">{{_i}}default{{/i}}</th>
                     <th>{{_i}}description{{/i}}</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>{{_i}}backdrop{{/i}}</td>
                     <td>{{_i}}boolean{{/i}}</td>
                     <td>{{_i}}true{{/i}}</td>
                     <td>{{_i}}Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.{{/i}}</td>
                  </tr>
                  <tr>
                     <td>{{_i}}keyboard{{/i}}</td>
                     <td>{{_i}}boolean{{/i}}</td>
                     <td>{{_i}}true{{/i}}</td>
                     <td>{{_i}}Closes the modal when escape key is pressed{{/i}}</td>
                  </tr>
                  <tr>
                     <td>{{_i}}show{{/i}}</td>
                     <td>{{_i}}boolean{{/i}}</td>
                     <td>{{_i}}true{{/i}}</td>
                     <td>{{_i}}Shows the modal when initialized.{{/i}}</td>
                  </tr>
                  <tr>
                     <td>{{_i}}remote{{/i}}</td>
                     <td>{{_i}}path{{/i}}</td>
                     <td>{{_i}}false{{/i}}</td>
                     <td><p>{{_i}}If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:{{/i}}</p>
                        <pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;</code></pre></td>
                  </tr>
               </tbody>
            </table>

            <h3{{_i}}>Methods{{/i}}</h3>
            <h4>.modal({{_i}}options{{/i}})</h4>
            <p>{{_i}}Activates your content as a modal. Accepts an optional options <code>object</code>.{{/i}}</p>
         <pre class="prettyprint linenums">
         $('#myModal').modal({
           keyboard: false
         })
         </pre>
            <h4>.modal('toggle')</h4>
            <p>{{_i}}Manually toggles a modal.{{/i}}</p>
            <pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre>
            <h4>.modal('show')</h4>
            <p>{{_i}}Manually opens a modal.{{/i}}</p>
            <pre class="prettyprint linenums">$('#myModal').modal('show')</pre>
            <h4>.modal('hide')</h4>
            <p>{{_i}}Manually hides a modal.{{/i}}</p>
            <pre class="prettyprint linenums">$('#myModal').modal('hide')</pre>
            <h3>{{_i}}Events{{/i}}</h3>
            <p>{{_i}}Bootstrap's modal class exposes a few events for hooking into modal functionality.{{/i}}</p>
            <table class="table table-bordered table-striped">
               <thead>
                  <tr>
                     <th style="width: 150px;">{{_i}}Event{{/i}}</th>
                     <th>{{_i}}Description{{/i}}</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>{{_i}}show{{/i}}</td>
                     <td>{{_i}}This event fires immediately when the <code>show</code> instance method is called.{{/i}}</td>
                  </tr>
                  <tr>
                     <td>{{_i}}shown{{/i}}</td>
                     <td>{{_i}}This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).{{/i}}</td>
                  </tr>
                  <tr>
                     <td>{{_i}}hide{{/i}}</td>
                     <td>{{_i}}This event is fired immediately when the <code>hide</code> instance method has been called.{{/i}}</td>
                  </tr>
                  <tr>
                     <td>{{_i}}hidden{{/i}}</td>
                     <td>{{_i}}This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).{{/i}}</td>
                  </tr>
               </tbody>
            </table>
         <pre class="prettyprint linenums">
         $('#myModal').on('hidden', function () {
           // {{_i}}do something…{{/i}}
         })
         </pre>
         </section>



         <!-- DatePicker
         ================================================== -->
         <section id="datepicker">
            <div class="page-header">
               <h1>{{_i}}DatePicker{{/i}} <small></small></h1>
            </div>
            <p>Code from: <a href="http://www.eyecon.ro/bootstrap-datepicker/">http://www.eyecon.ro/bootstrap-datepicker/</a></p>

            <p>{{_i}}Attached to a field with the format specified via options.{{/i}}</p>
            <div class="bs-docs-example">
               <input type="text" id="dp1" value="02-16-2012" class="span2 datepicker">
            </div>
         <pre class="prettyprint linenums">
         &lt;input type="text" id="dp1" value="02-16-2012" class="span2 datepicker"&gt;
         </pre>

            <p>{{_i}}Attachet to a field with the format specified via data tag.{{/i}}</p>
            <div class="bs-docs-example">
               <input type="text" id="dp2" data-date-format="mm/dd/yy" value="02/16/12" class="span2 datepicker">
            </div>
         <pre class="prettyprint linenums">
         &lt;input type="text" id="dp2" data-date-format="mm/dd/yy" value="02-16-2012" class="span2 datepicker"&gt;
         </pre>

            <p>{{_i}}As component.{{/i}}</p>
            <div class="bs-docs-example">
               <div data-date-format="dd-mm-yyyy" data-date="12-02-2012" id="dp3" class="input-append datepicker">
                  <input type="text" readonly="" value="12-02-2012" size="16" class="span2">
                  <span class="add-on"><i class="icon-calendar"></i></span>
               </div>
            </div>
         <pre class="prettyprint linenums">
         &lt;div data-date-format="dd-mm-yyyy" data-date="12-02-2012" id="dp3" class="input-append datepicker"&gt;
            &lt;input type="text" readonly="" value="12-02-2012" size="16" class="span2"&gt;
            &lt;span class="add-on"&gt;&lt;i class="icon-calendar"&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;/div&gt;
         </pre>

         </section>



         <!-- FlipView
         ================================================== -->
         <section id="flipview">
            <div class="page-header">
               <h1>{{_i}}FlipView{{/i}} <small></small></h1>
            </div>
            <p>The FlipView control lets flip through views or items one at a time. Flip buttons appear on mouse hover and let people flip to the next or previous item.</p>
            <p>
               <span class="label label-info">Note:</span> The FlipView control is a customization of the <a href="./javascript.html#carousel">Carousel</a> component, so it requires the carousel javascript plugin.
            </p>


            <h2>{{_i}}Example carousel{{/i}}</h2>
            <p>{{_i}}The slideshow below shows a generic plugin and component for cycling through elements like a carousel.{{/i}}</p>
            <div class="bs-docs-example">
               <div class="row">
                  <div class="span4">
                     <div id="myFlipview" class="carousel flipview slide span4">
                        <div class="carousel-inner">
                           <div class="item active">
                              <img src="content/img/sample-1.jpg" alt="">
                              <div class="carousel-caption">
                                 <h4>{{_i}}First Thumbnail label{{/i}}</h4>
                                 <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                              </div>
                           </div>
                           <div class="item">
                              <img src="content/img/sample-2.jpg" alt="">
                              <div class="carousel-caption">
                                 <h4>{{_i}}Second Thumbnail label{{/i}}</h4>
                                 <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                              </div>
                           </div>
                           <div class="item">
                              <img src="content/img/sample-3.jpg" alt="">
                              <div class="carousel-caption">
                                 <h4>{{_i}}Third Thumbnail label{{/i}}</h4>
                                 <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                              </div>
                           </div>
                        </div>
                        <a class="left carousel-control" href="#myCarousel" data-slide="prev">&#xe0f4;</a>
                        <a class="right carousel-control" href="#myCarousel" data-slide="next">&#xe0f1;</a>
                     </div>
                  </div>
               </div>
            </div>{{! /example }}
<pre class="prettyprint linenums">
&lt;div id="myCarousel" class="carousel flipview slide"&gt;
  &lt;!-- {{_i}}Carousel items{{/i}} --&gt;
  &lt;div class="carousel-inner"&gt;
    &lt;div class="active item"&gt;…&lt;/div&gt;
    &lt;div class="item"&gt;…&lt;/div&gt;
    &lt;div class="item"&gt;…&lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- {{_i}}Carousel nav{{/i}} --&gt;
  &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
  &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
&lt;/div&gt;
</pre>

         </section>

      </div>
   </div>
</div>